<template>
    <div class="cdialog">
        <el-dialog v-model="dialogVisible" :show-close="false" @close="closedialog()" :draggable="props.draggable"
            width="30%" @open="openDialog()" destroy-on-close :modal="props.model" :top="props.top"
            :align-center="props.center" :class="props.bubble ? 'Cdialog' : ''">
            <template #header="close, titleId, titleClass" v-if="props.showTitle">
                <div class="dialog-header">
                    <div class="dialog-title">
                        <div class="title-text">
                            {{ props.title }}
                        </div>
                    </div>
                    <div class="dialog-close" @click="closedialog()">
                        <svg-icon icon="close"></svg-icon>
                    </div>
                </div>
            </template>
            <div class="content">
                <slot></slot>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/prop-types'
import { ref, toRefs, watch, computed, provide } from 'vue'
const emit = defineEmits(['closeDialog', 'openDialog'])
import { isString } from 'lodash-es'
const props = defineProps({
    title: {
        type: String,
        default: () => '弹框标题'
    },
    visible: {
        type: Boolean,
        default: false
    },
    draggable: {
        type: Boolean,
        default: true
    },
    model: {
        type: Boolean,
        default: true
    },
    top: {
        type: String,
        default: '20vh'
    },
    showTitle: {
        type: Boolean,
        default: true
    },
    center: {
        type: Boolean,
        default: true
    },
    // 去props变量的值判断是否为气泡框
    bubble: {
        type: Boolean,
        default: false
    },
    dialogType: {
        type: String,
        default: 'video'
    },
    width: propTypes.oneOfType([Number, String]).def(600),
})
const dWidth = computed(() => {
    return isString(props.width) ? window.innerWidth / 1920 * (props.width as any) as number : window.innerWidth / 1920 * (props.width as any) as number
})


const { visible } = toRefs(props)
let dialogVisible = ref(false)
watch(
    visible,
    newVal => {
        dialogVisible.value = newVal
    },
    { immediate: true }
)



const closedialog = () => {
    emit('closeDialog', false)
}
const openDialog = () => {
    emit('openDialog')
}


provide('closedialog', closedialog)
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
    --el-bg-color: rgba(23, 44, 51, 1) !important;
    background-size: 100% 100%;
    border: 1px solid #26BEFF;
}

:deep(.Cdialog) {
    background: url("../../assets/image/设备标签气泡.png") center no-repeat !important;
    background-size: 100% 100% !important;
}

//弹框头部
:deep(.el-dialog__header) {
    --el-text-color-primary: #1EFFFF;
    --el-text-color-regular: #fff;
    padding: 0 !important;
    width: 100%;
    height: 46px;

}

//弹框标题
:deep(.el-dialog__title) {
    margin-left: 24px;
    line-height: 64px;
}

//弹框内容部分
:deep(.el-dialog__body) {
    --el-bg-color: rgba(23, 44, 51, 1) !important;
    --el-text-color-regular: #fff;
}

.dialog-header {
    background-color: rgba(23, 44, 51, 1) !important;
}

.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.dialog-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: clamp(3.625rem, 3.02vw, 7.25rem);
    background-color: rgba(9, 46, 61, 0.60);
    align-items: center;

    .dialog-title {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;

        .title-text {
            margin-left: clamp(1.875rem, 1.56vw, 3.75rem);
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-size: clamp(1rem, 0.83vw, 2rem);
            color: #26BEFF;
        }
    }

    .dialog-close {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        cursor: pointer;

        :deep(.svg-icon) svg {
            width: 24px;
            height: 24px;
        }
    }

}

.content {
    width: 100%;
    height: 100%;

}
</style>